window.onload = function(){
	var obj = document.getElementById("wrap");
	var aLi = obj.getElementsByTagName("li");
	for(i = 0; i < aLi.length; i++){
		aLi[i].timer = null;
		aLi[i].alpha = 30;
		aLi[i].onmouseover = function(){
			startMove(this,"opacity",100);  
		}
		aLi[i].onmouseout = function(){
			startMove(this,"opacity",30);  
		}
		aLi[i].onclick = function(){
			startMove(this,"height",100);
		}
	}
}

//宽度动画
function startMove(obj,attr,final){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){

		//1.取得当前值
		iCur = 0;
		if(attr == "opacity"){
			iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
		}else{
			iCur = parseInt(getStyle(obj,attr));
		}

		//2.计算速度
		var speed = (final - iCur)/10;
		speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); 

		//3.检测停止
		if(obj.style[attr] == final){
			clearInterval(obj.timer);
		}else{
			if(attr == "opacity"){
				// obj.style.filter = 'alpha:(opacity:'+(iCur + speed)+')';
				obj.style[attr] = (iCur + speed)/100;
			}else{
				obj.style[attr] = iCur + speed + "px";   
			}
		}
	},30)
}

//透明度动画
// function starMove(obj,final){
// 	clearInterval(obj.timer);
// 	obj.timer = setInterval(function(){
// 		var speed = 0;
// 		if(obj.alpha > final){
// 			speed = -1; 
// 		}else{
// 			speed = 1;
// 		}
// 		if(obj.alpha == final){
// 			clearInterval(obj.timer);
// 		}else{
// 			obj.alpha += speed;
// 			obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
// 			obj.style.opacity = obj.alpha/100;
// 		}
// 	})
// }


function getStyle(elem,attr){
	if(elem.currentStyle){
		return elem.currentStyle[attr];
	}else{
		return getComputedStyle(elem,false)[attr];
	}
}